<template>
  <div class="component_wrap">
    <LssTable :columns="columns" :uniqueKey="uniqueKey" :data="tableData" ref="lssTableRef">
      <!-- 列内容插槽 -->
      <template #customColumn="{ row }">
        <span>{{ row.customField }}</span>
      </template>

      <!-- 自定义表头插槽 -->
      <template #customHeader="{ column }">
        <span>{{ column.label + '自定义表头' }}</span>
      </template>
    </LssTable>
  </div>
</template>
<script setup lang="ts">
import { ref, h, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 定义列配置
const columns = [
  // 添加序号列
  { type: 'index', label: '序号', width: '55' },
  {
    label: '名称',
    prop: 'name'
  },
  {
    label: '年龄',
    prop: 'age'
  },
  {
    label: '自定义列',
    slot: 'customColumn'
  },
  {
    label: '支持jsx语法',
    // 返回 JSX 需要 h 函数渲染
    formatter: (row) => h('span', {}, row.addr + '测试'),
    prop: 'addr'
  },
  {
    label: '性别',
    prop: 'sex',
    headerSlot: 'customHeader'
  }
]

// 定义表格数据
const tableData = ref([
  { orderNo: '1', name: '张三', age: 25, customField: '自定义内容1', sex: '男', addr: '北京' },
  { orderNo: '2', name: '李四', age: 30, customField: '自定义内容2', sex: '男', addr: '上海' },
  { orderNo: '3', name: '王五', age: 28, customField: '自定义内容3', sex: '男', addr: '天津' }
])

const lssTableRef = ref<InstanceType<typeof LssTable> | null>(null)

// 定义唯一标识字段
const uniqueKey = ref('orderNo')

onMounted(() => {
  console.log(lssTableRef.value, 'lssTableRef')
})
</script>

<style lang="scss" scoped></style>
